<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/login.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个spacer用来占位 -->
        <span class="spacer"></span>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主题 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- .card表示用户信息 -->
            <div class="card">
                <img src="./image/profile.jpg" alt="">
                <h3>frost-cold</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <!-- <div class="blog">
                <div class="title">这是第一篇博客</div>
                <div class="date">2024-05-02 12:00:00</div>
                <div class="desc">今日事今日毕 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, quaerat harum, ad quia quos maxime nostrum consectetur sequi architecto laborum quas facilis nulla provident neque. Inventore recusandae pariatur fuga quaerat?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div> -->

            
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // 通过这个函数，从服务器(数据库)获取到博客列表的数据
        function getBlogs() {
            $.ajax({
                type: 'get',
                url: 'blog',
                success: function(body) {
                    // 根据返回的 JSON 数据构造页面内容
                    let container = document.querySelector('.container-right');
                    for(let blog of body) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 创建博客标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 创建博客日期
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = body.postTime;
                        blogDiv.appendChild(dateDiv);
                        // 创建博客摘要
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = body.content;
                        blogDiv.appendChild(descDiv);
                        // 创建按钮查看全文
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 >>';
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);
                        // 把 blogDiv 加入外层元素
                        container.appendChild(blogDiv);
                    }
                }
            });
        }
    </script>
</body>
</html>